<template>
  <a-flex vertical>
    <a-flex>
      <div class="deskTopBaseBox"></div>
      <a-flex class="deskTopBaseContainer" align="center">
        <div
          v-for="(item, index) in listData"
          @click="groupBoxOnclick(item)"
          @mouseenter="showTooltip(index)"
          @mouseleave="hideTooltip"
          class="toolItem"
          :key="index"
          :style="{ whiteSpace: 'nowrap' }"
        >
          <SvgIcon :iconName="item.icon" size="21px"></SvgIcon>
          <div v-if="tooltipIndex === index" class="tooltip">
            {{ item.name }}
          </div>
        </div>
      </a-flex>
    </a-flex>
  </a-flex>
</template>

<script setup>
import { ref } from 'vue'
import RouterConstant from '../../components/constant/routerConstant'

const listData = ref([
  {
    icon: 'icon-Windows',
    name: '系统监控',
    tips: '硬件,测速,图表',
    route: RouterConstant.WinMonitor
  },
  {
    icon: 'icon-jsonjiexi',
    name: 'JSON工具类',
    tips: '在线解析,压缩,转义',
    route: RouterConstant.JsonTool
  },
  {
    icon: 'icon-erweima1',
    name: '二维码生成',
    tips: '识别,生成',
    route: RouterConstant.QrCode
  },
  {
    icon: 'icon-random',
    name: '随机字符',
    tips: '时间戳,密码,流水号',
    route: RouterConstant.RandomTool
  },
  {
    icon: 'icon-icons-',
    name: '加密工具',
    tips: '加解,解密,',
    route: RouterConstant.EncryptionTool
  },
  {
    icon: 'icon-cron',
    name: 'Cron表达式',
    tips: '生成,模拟,可视化',
    route: RouterConstant.CronTool
  },
  {
    icon: 'icon-WebSocket',
    name: 'WebSocket连接',
    tips: '连接测试,消息推送',
    route: RouterConstant.WebSocketTool
  },
  {
    icon: 'icon-postman_',
    name: '在线PostMan',
    tips: '存储Api,模拟发送请求',
    route: RouterConstant.PostMan
  }
])

const groupBoxOnclick = (item) => {
  window.api.createWindow(item.route)
}

// 新增：用于控制提示框的显示
const tooltipIndex = ref(null)

// 新增：显示提示框的方法
const showTooltip = (index) => {
  tooltipIndex.value = index
}

// 新增：隐藏提示框的方法
const hideTooltip = () => {
  tooltipIndex.value = null
}
</script>

<style scoped>
.deskTopBaseContainer {
  background-color: #ffffff;
  padding: 10px 3px 10px 1px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  height: 30px;
}

.deskTopBaseBox {
  height: 30px;
  width: 30px;
  background-image: url('../../../../../resources/icon/icon.png');
  background-size: cover;
  background-position: center;
  -webkit-app-region: drag;
}

.toolItem {
  border: 1px #ffffff solid;
  cursor: pointer;
  padding: 2px;
}

.toolItem:hover {
  border: 1px #a8a2a2 solid;
}

/* 新增：提示框样式 */
.tooltip {
  position: absolute;
  background-color: white;
  border: 1px solid #ccc;
  padding: 5px 10px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-top: 10px;
  z-index: 1000;
}
</style>
